<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

// 创建一个列表：
    // var arr=[1,2,3,4];

    // var ul=document.createElement("ul")  创建一个ul标签
    // document.body.appendChild(ul);      将标签放入body中
    // for(var i=0;i<arr.length;i++){
    //     var li=document.createElement("li");     创建一个li标签
    //     li.innerHTML=arr[i];    将li写入页面中
    //     // ul.appendChild(li);         再将li放入ul当中
    // }


 
// 创建一个10行10列的表格：
   
        // var table=document.createElement("table");     创建一个table标签
        
        // for(var i=0;i<10;i++){
        //     var tr=document.createElement("tr");        创建tr标签
        //     table.appendChild(tr);                      将tr放入table内
        //     for(var j=0;j<10;j++){
        //         var td=document.createElement("td");    创建td标签
        //         tr.appendChild(td);                      将td放入tr内                   
        //     }
        // }
        // document.body.appendChild(table);               将table放入body内

        // 如果document.body.appendChild(table); 放在for循环前面，那么在生成tr和td时，不断打开DOM树，页面不断的在重绘  
// 放在后边的好处是：当table没有放在页面中时，添加tr和td时，是在内存当中运行的，内容创建完后，再将table放入页面中时，就
// 是一次完成页面的重绘


              // var ul=document.querySelector("ul");
        // var li=document.createElement("li");
        // li.innerHTML="0";
        // ul.appendChild(li);
        // ul.insertBefore(li,ul.firstChild);
       
//    当用ul.appendChild(li);添加li时，会添加在ul尾部输出结果是0，1
//    当用ul.insertBefore(li,ul.firstChild);会添加在ul最上方，输出结果为 1，0


//    ------------------------------------------------------------------------------------------------      
        // function insertPrev(newElem,targetElem){
        //     targetElem.parentElement.insertBefore(newElem,targetElem);
        // }   
        // var ul=document.querySelector("ul");
        // var p=document.createElement("p");
        // insertPrev(p,ul);
// 将p标签插入在ul标签的前面，找到ul的父元素，用insertBefore将p插在ul前面

        // function insertNext(newElem,targetElem){
        //     targetElem.parentElement.insertBefore(newElem,targetElem.nextSibling);
        // }
        // var ul=document.querySelector("ul");
        // var p=document.createElement("p");
        // insertNext(p,ul);
        // // insertBefore是在什么前面，targetElem.nextSibling是下一个标签，这样就插在了ul 后面



        // 用p标签包裹ul标签
        // function warp(newElem,targetElem){
        //     var parent=targetElem.parentElement;  父元素
        //     var next=targetElem.nextSibling;    相邻下一个元素
        //     newElem.appendChild(targetElem);    将ul插入到p标签内
        //     parent.insertBefore(newElem,next);  将p插入在ul的位置
        // }

        // var ul=document.querySelector("ul");
        // var p=document.createElement("p");
        // warp(p,ul);

    
    
    
    
    
    
    
    
    
    
    
    
    
    </script>
</body>
</html>